<template>
  <!-- vies/ManageHome.vue后台管理首页 -->
  <div>
    <el-container>
      <!-- 头部开始 -->
      <el-header style="background: #555">
        <el-menu router class="el-menu-demo" mode="horizontal" background-color="#555" :default-active="$route.path" active-text-color="#fff">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              数据查询
            </template>
            <el-menu-item index="/manage/sellers">商家列表</el-menu-item>
            <el-menu-item index="/manage/commodities">商品列表</el-menu-item>
            <el-menu-item index="/manage/reviews">评论列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-bell"></i>
              消息中心</template>
            <el-menu-item index="2-1">退货问题</el-menu-item>
            <el-menu-item index="2-2">举报信息</el-menu-item>
            <!-- <el-menu-item index="2-3">评论管理</el-menu-item> -->
          </el-submenu>
          <el-menu-item index="/manage/main"><i class="el-icon-s-home"></i>首页</el-menu-item>
          <el-menu-item index="/manage/index">退出</el-menu-item>
        </el-menu>
      </el-header>

      <el-container>
        <!-- 左侧边栏开始 -->
        <el-aside width="200px" class="aside-menu scroll">
          <el-menu
            router
            background-color="#555"
            text-color="#bbb"
            active-text-color="#fff">
            <!-- 以下左侧边栏的跳转地址后期加参数，查询出还未审核的数据 -->
            <el-menu-item index="/manage/sellers">
              <i class="el-icon-caret-right"></i>
              待审核商家
            </el-menu-item>
            <el-menu-item index="/manage/commodities">
              <i class="el-icon-caret-right"></i>
              待审核商品
            </el-menu-item>
            <!-- /components/table -->
            <el-menu-item index="/manage/reviews">
              <i class="el-icon-caret-right"></i>
              待审核评论
            </el-menu-item>
            <el-menu-item index="/manage/users">
              <i class="el-icon-caret-right"></i>
              用户信息
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 左侧边栏结束 -->
        <!-- 页面主体显示 -->
        <el-main class="main scroll">
          <!-- 主区域数据通过路由动态切换 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.main {
  height: calc(100vh - 60px);
}
.aside-menu {
  height: calc(100vh - 60px); /*减号两侧需要有空格*/
  padding-left: 15px;
  background-color: #555;
}
/* 滚动条 */
.scroll::-webkit-scrollbar {
  width: 5px;
}
/* 滚动条  滑块*/
.scroll::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
}
/* 滚动条的背景样式  滑道*/
.scroll::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
